<template>
  <div class="box">
    <el-card class="box-card">
      <div style="display: flex; justify-content: space-between">
        <div>
          <el-input
            v-model="userName"
            placeholder="请输入Iwork用户名称"
            style="width: 200px"
            clearable
          ></el-input>

          Iwork响应时间:
          <el-date-picker
            v-model="timeVal"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          >
          </el-date-picker>
          <el-select
            v-model="numValue"
            placeholder="选取当前批次"
            @change="changeTitleCon(numValue)"
            clearable
          >
            <el-option
              :label="item"
              :value="item"
              v-for="item in numList"
              :key="item.id"
            ></el-option>
          </el-select>
          <!-- <el-date-picker v-model="timeVal"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker> -->
          <el-button @click="searchData()" type="primary">查询</el-button>
          <el-button type="success" @click="exportGet()">导出</el-button>
        </div>
        <div>
          <el-button @click="$router.go(-1)" type="primary">返回</el-button>
          <el-button @click="handleRefresh()" type="success">刷新</el-button>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px">
      <div class="des_con">
        <table class="table">
          <tr>
            <td><span>推送活动类型：</span>{{ duInfo.activityName }}</td>
            <td>
              <span>推送方式：</span
              >{{ duInfo.sendType == 0 ? "普通推送" : "推送升级" }}
            </td>
          </tr>
          <tr>
            <td><span>推送内容：</span>{{ duInfo.originalContent }}</td>
            <td><span>推送对象：</span>{{ getSendObject(duInfo) }}</td>
          </tr>
          <tr>
            <td v-if="duInfo.unitType">
              <span>推送层级：</span>{{ getState(duInfo.unitType) }}
            </td>
            <td><span>已发短信：</span>{{ duInfo.shortCount }}</td>
          </tr>
          <tr>
            <td><span>外呼成功数：</span>{{ duInfo.aiCountSuccess }}</td>
            <td><span>Iwork推送人数：</span>{{ totalCount }}</td>
          </tr>
          <tr>
            <td>
              <span>已读：</span
              ><span class="read" @click="fetchTableListWithFirstPage(1)">{{
                isRedEq1Count
              }}</span>
            </td>
            <td>
              <span>未读：</span
              ><span class="read" @click="fetchTableListWithFirstPage(0)">{{
                totalCount > isRedEq1Count ? totalCount - isRedEq1Count : "0"
              }}</span>
            </td>
          </tr>

          <tr>
            <td>
              <span>失败数量：</span
              ><span class="read" @click="fetchTableListIsSend(0)">{{
                isSendEq0Count
              }}</span>
            </td>
          </tr>
        </table>

        <!-- <p><span>推送内容：</span>{{$route.query.activityName}}</p>
          <p><span>推送方式：</span>{{$route.query.sendType == 0 ? "普通推送" : '推送升级'}}</p> -->
        <!-- <p><span>推送模式：</span>{{$route.query.sendGroup == 0 ? "个人" : '群组'}}</p>
          <p><span>推送内容：</span>{{$route.query.content}}</p> -->
        <!-- <p><span>日期：</span>{{$route.query.sendTime}}</p>
          <p><span>已发短信：</span>{{$route.query.shortCount}}</p>
          <p><span>外呼成功数：</span>{{$route.query.aiCountSuccess}}</p>
          <p><span>Iwork推送人数：</span>{{$route.query.allRead}}</p>
          <p><span>已读：</span><span class="read" @click="fetchTableList(1)">{{isRead}}</span></p>
          <p><span>未读：</span><span class="read" @click="fetchTableList(0)">{{noRead}}</span></p> -->
      </div>
      <el-table :data="dataList" style="width: 100%; margin-top: 20px">
        <el-table-column type="index" label="序号" align="center" width="60">
          <template slot-scope="scope">
            <span :title="scope.row.id"> {{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="userName"
          label="Iwork用户名称"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <span
              @click="goDetail(scope.row.jobNo, scope.row.linkId)"
              style="cursor: pointer; color: rgb(62, 142, 247)"
            >
              {{ scope.row.userName }}({{ scope.row.jobNo }})</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="单位名称"
          width="160"
          align="center"
          prop="orgFullName"
        >
        </el-table-column>
        <el-table-column label="IWork推送情况" width="160" align="center">
          <template slot-scope="scope">
            <span v-html="getIWorkState(scope.row)"></span>
          </template>
        </el-table-column>
        <el-table-column label="短信推送情况" width="160" align="center">
          <template slot-scope="scope">
            <span v-html="getSmsState(scope.row)"></span>
          </template>
        </el-table-column>

        <el-table-column label="外呼推送情况" width="160" align="center">
          <template slot-scope="scope">
            <!-- <span v-html="getCallState(scope.row)"></span> -->

            <el-tag
              :type="
                scope.row.aiRed == 0 || scope.row.aiRed == 2
                  ? 'danger'
                  : 'success'
              "
              disable-transitions
              v-if="null != scope.row.aiIsSend"
              v-html="getCallState(scope.row)"
            ></el-tag>
          </template>
        </el-table-column>

        <el-table-column label="IWork响应情况" width="160" align="center">
          <template slot-scope="scope">
            <span v-html="getIWorkReadState(scope.row)"></span>
          </template>
        </el-table-column>
        <el-table-column label="外呼响应情况" width="180" align="center">
          <template slot-scope="scope">
            <span v-html="getCallReadState(scope.row)"></span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="IWork推送日志" width="180" align="center">
          <template slot-scope="scope">
            <span v-html="getIWorkmessage(scope.row)"></span>
          </template>
        </el-table-column> -->
        <el-table-column prop="message" label="IWork推送日志" align="center">
        </el-table-column>
        <el-table-column
          prop="shortMessage"
          label="短信推送日志"
          align="center"
        >
        </el-table-column>

        <el-table-column prop="aiMessage" label="外呼推送日志" align="center">
        </el-table-column>
        <el-table-column prop="logIndex" label="批次" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="handleDetail(scope.row.jobNo, scope.row.logIndex)"
              >详情</el-button
            >

            <!-- <el-button size="mini"
                       type="success"
                       @click="waihu(scope.row.id)">外呼测试</el-button> -->
          </template>
        </el-table-column>

        <!-- <el-table-column prop="content"
                         label="活动名称"
                         align="center">
        </el-table-column> -->
        <!-- <el-table-column prop="sendTime"
                         label="推送日期"
                         align="center">
        </el-table-column> -->
        <!-- <el-table-column label="是否已反馈" align="center">
          <template slot-scope="scope">
            <span class="green" v-if="scope.row.isRed === 1"></span>
            <span class="red" v-if="scope.row.isRed === 0">未反馈</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="iworkTime"
                         label="反馈时间"
                         align="center">
        </el-table-column> -->
        <!-- <el-table-column label="短信是否推送"
                         align="center">
          <template slot-scope="scope">
            <i class="el-icon-circle-check green"
               v-if="scope.row.shortRed === 1"></i>
            <i class="el-icon-circle-close red"
               v-if="scope.row.shortRed === 0"></i>
          </template>
        </el-table-column>
        <el-table-column prop="shortTime"
                         label="短信推送时间"
                         align="center">
        </el-table-column>
        <el-table-column label="是否已呼通"
                         align="center">
          <template slot-scope="scope">
            <i class="el-icon-circle-check green"
               v-if="scope.row.aiRed === 1"></i>
            <i class="el-icon-circle-close red"
               v-if="scope.row.aiRed === 0"></i>
          </template>
        </el-table-column>
        <el-table-column label="外呼时间" prop="shortTime" align="center">
        </el-table-column> -->
        <!-- <el-table-column label="是否已通知上级领导"
                         align="center">
          <template slot-scope="scope">
            <i class="el-icon-circle-check green"
               v-if="scope.row.aiRed === 1"></i>
            <i class="el-icon-circle-close red"
               v-if="scope.row.aiRed === 0"></i>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="发送日志"
                         prop="messageLog"
                         align="center">
        </el-table-column> -->
        <!-- <el-table-column label="操作"
                         align="center"
                         width="320">
          <template slot-scope="scope">

            <el-button size="mini"
                       type="success"
                       @click="waihu(scope.row.id)">外呼测试</el-button>

             <el-button size="mini" type="warning" @click="handleOpenPush(scope.row.id)">开启</el-button> 
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        :currentPage="pageNum"
        :pageSize="pageSize"
        ref="pagination"
        @pageChange="pageChange"
      />
    </el-card>
    <!-- 弹窗, 新增 / 修改 -->
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      dataList: [],
      numList: [],
      numValue: "",
      pageNum: 1,
      pageSize: 50,
      totalCount: 0,
      timeVal: "",
      startTime: "",
      endTime: "",
      code: "", //错误信息
      total: 0,
      userName: "",
      isRead: null,
      noRead: null,
      duInfo: {},
      id: "",
      isSendEq0Count: 0, //失败数量
      isRedEq1Count: 0, //已读数量
      isSend: null,
    };
  },
  created() {
    // this.isRead = this.$route.query.isRead;
    // this.noRead =
    //   Number(this.$route.query.allRead) - Number(this.$route.query.isRead);
    this.getUrl();
    // this.fetchTableList();
    // this.fetchDetailsData();
    // console.log(this.duInfo,"222222222222");
  },
  activated() {
    // this.getchangeTitleCon();
  },
  methods: {
    getUrl() {
      // let url = window.location.href;
      let url = window.location.href;
      // console.log("staffAccount=", this.$route.params.staffAccount);
      // console.log("apiKey=", this.$route.params.apiKey);
      console.log("url=", url);
      // console.log("url.indexOf('token')==", url.indexOf("token"));
      // console.log("url.indexOf('token')==", url.indexOf("token"));
      // console.log("url.indexOf('token')==", url.indexOf("token"));
      console.log("------------------------", this.$cookie.get("token"));
      var reg = url.substring(url.indexOf("?") + 1, url.length).split("&");
      console.log("=====================", reg);
      let list = [];
      let obj = {};
      reg.forEach((item) => {
        let data = item.split("=");
        let x = data[0];
        obj[x] = data[1];
        list.push(obj);
      });
      console.log("listlistlistlistlist", list);
      const newArr = Array.from(new Set(list));
      console.log("newArrnewArrnewArrnewArr==", newArr);
      newArr.forEach((element) => {
        // console.log("element=====",element);
        console.log("element=====", element.staffAccount);
        this.staffAccountToken = element.staffAccount;
        this.apiKey = element.apiKey;
        console.log("element=====", element.apiKey);
        console.log("element=====", element.name);
      });
      console.log("token存在");
      this.getToken(this.staffAccountToken);
      console.log("token不存在");
      console.log("this.staffAccountToken===", this.staffAccountToken);
    },
    //获取token
    getToken(staffAccount) {
      // this.$http({
      //   url: this.$http.adornUrl("/createTripartiteToken"),
      //   method: "get",
      //   params: this.$http.adornParams({
      //     staffAccount: staffAccount,
      //   }),
      // }).then((res) => {
        this.fetchTableList();
        this.fetchDetailsData();
      // });
    },
    // 获取表格数据
    fetchTableListIsSend(index) {
      this.isRead = null;
      this.pageNum = 1;
      this.isSend = index;
      this.getTableData();
    },
    getSendObject(item) {
      let str = "";
      if (item.sendGroup == 1) {
        str = item.groupName;
      } else {
        if (null != item.labelName) {
          str = item.labelName;
        } else {
          str = "个人";
        }
      }
      return str;
    },
    handleRefresh() {
      this.numValue = "";
      this.fetchTableList();
      this.fetchDetailsData();
    },
    //头部详情数据
    fetchDetailsData() {
      this.$http({
        url: this.$http.adornUrl(`cpcpdu/info/${this.$route.query.id}`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then((res) => {
        if (res.data.code === 0) {
          this.duInfo = res.data.cpcpDu;
          console.log("this.duInfo====", this.duInfo);
          // console.log(this.duInfo);
          // console.log(this.duInfo.id, "duInfo.id");
          // this.id=res.data.cpcpDu.id;
          // console.log(this.id,"idididididid");
          this.getchangeTitleCon();
        }
      });
    },
    //点击选取当前批次
    getchangeTitleCon() {
      console.log(this.duInfo.id, "this.duInfo.id");
      // this.fetchDetailsData();
      // console.log("fff");
      this.$http({
        url: this.$http.adornUrl(`/cpcplog/logIndexs/${this.duInfo.id}`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then((res) => {
        console.log(res, "getchangeTitleCon");
        this.numList = res.data.data;
        // for(let index =0;index<res.data.data.length;index++){
        //   this.numValue=res.data.data[index].logIndex
        // }

        // if (res.data.code === 0) {
        //   this.duInfo = res.data.cpcpDu;
        //   console.log(this.duInfo);
        // }
      });
    },
    changeTitleCon(logIndex) {
      this.numValue = logIndex;
      console.log(this.numValue, "this.numValue");
      this.fetchTableList();
    },

    getCallReadState(item) {
      let str = "";
      if (item.aiRed == 1) {
        str += "已响应";
        str += "</br>" + item.aiTime + "";
      }
      return str;
    },
    getIWorkReadState(item) {
      let str = "";
      if (item.iworkRed == 1) {
        str += "已响应";
        str += "</br>" + item.iworkTime + "";
      }
      return str;
    },
    //外呼情况
    getCallState(item) {
      let str = "";
      if (item.aiIsSend == "0") {
        str = "呼通失败";
      }
      if (item.aiIsSend == "2") {
        str = "未呼通";
      }
      if (item.aiIsSend == "1" && item.aiRed == 0) {
        str = "未接听";
      }
      if (item.aiRed == 1) {
        str = "已呼通";
      }
      if (item.aiRed == 2) {
        str = "呼叫失败";
      }

      if (item.aiTime != null) {
        str += "</br>" + item.aiTime + "";
      }

      return str;
    },
    //推送层级
    getState(item) {
      console.log("item===", item);
      let str = "";
      if (item == 2) {
        str = "二级单元";
      } else if (item == 3) {
        str = "三级单元";
      } else if (item == 4) {
        str = "四级单元";
      } else if (item == 5) {
        str = "五级单元";
      } else {
        str = "";
      }
      return str;
    },
    //信息推送情况
    getSmsState(item) {
      let str = "";
      if (item.shortIsSend == 1) {
        str += "已推送";
        str += "</br>" + item.shortTime + "";
      } else if (item.shortIsSend == 2) {
        str += "未推送";
        // str += "</br>" + item.shortTime + "";
      } else if (item.shortIsSend == 0) {
        str += "推送失败";
        if (item.shortTime != null) {
          str += "</br>" + item.shortTime + "";
        }
      } else {
        str += "";
      }

      return str;
    },
    //推送情况
    getIWorkState(item) {
      let str = "";
      if (item.iworkIsSend == 1) {
        str += "已推送";
        str += "</br>" + item.iworkSendTime + "";
      } else if (item.iworkIsSend == 2) {
        str += "未推送";
      } else if (item.iworkIsSend == 0) {
        str += "推送失败";
        if (item.iworkSendTime != null) {
          str += "</br>" + item.iworkSendTime + "";
        }
      } else {
        str += "";
      }

      return str;
    },
    //推送日志
    // getIWorkmessage(item) {
    //   let str = "";
    //   if (item.message == 1) {
    //     str += "已推送";
    //     str += "</br>" + item.iworkSendTime + "";
    //   } else {
    //     str += "未推送";
    //   }

    //   return str;
    // },

    //  点击按钮去详情
    handleDetail(jobNo, logIndex) {
      console.log(jobNo, "jobNo", logIndex, "logIndex");
      this.$router.push({
        path: "/thirdPathduDetDetDetails",
        query: {
          staffAccount: jobNo,
          logIndex: logIndex,
        },
      });
    },
    //点击Iwork用户名称去详情
    goDetail(jobNo, linkId) {
      console.log("ddddddd");
      console.log(jobNo, "jobNo", linkId, "linkId");
      this.$router.push({
        path: "/thirdPathduDetDetDetails",
        query: {
          staffAccount: jobNo,
          linkId: linkId,
        },
      });
    },
    // 点击搜索
    // searchData() {
    //   this.fetchTableList();
    //   this.fetchDetailsData()
    // },
    waihu(id) {
      this.$http({
        url: this.$http.adornUrl("/cpcplog/testCall"),
        method: "post",
        params: this.$http.adornParams({
          id: id,
        }),
      }).then((res) => {
        if (res.data.code === 0) {
          this.$message({
            message: "调用成功!",
            type: "success",
          });
          this.fetchTableList();
        }
      });
    },
    getTableData() {
      this.$http({
        url: this.$http.adornUrl(`/cpcplog/listInfo`),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageNum,
          limit: this.pageSize,
          linkId: this.$route.query.id,
          searchStr: this.userName,
          isRead: this.isRead,
          isSend: this.isSend,
          startTime: this.startTime,
          endTime: this.endTime,
          sendType: 0,
          logIndex: this.numValue,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.total = data.page.totalCount;
          this.dataList = data.page.list;
          this.totalCount = data.totalCount;
          this.isSendEq0Count = data.isSendEq0Count;
          this.isRedEq1Count = data.isRedEq1Count;
        }
      });
    },
    // 获取表格数据
    fetchTableList() {
      this.getTableData();
    },
    // 点击已读未读
    fetchTableListWithFirstPage(isRead) {
      this.isRead = isRead;
      this.isSend = null;
      this.pageNum = 1;
      this.getTableData();
    },
    //格式化时间
    transformTimestamp(result) {
      const date = new Date(result);
      const Y = date.getFullYear() + "";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "";
      const D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "";
      // const h = date.getHours() + ":";
      // const m = date.getMinutes();
      // const s = date.getSeconds(); // 秒
      const dateString = Y + "-" + M + "-" + D;
      console.log("dateString", dateString); // > dateString 20200110
      return dateString;
    },
    //查询按钮
    searchData() {
      this.isSend = null;
      this.isRead = null;
      console.log(this.isRead, this.isSend);
      if (!this.timeVal == "") {
        var time1 = new Date(this.timeVal[0]).getTime();
        var time2 = new Date(this.timeVal[1]).getTime();
        const start = this.transformTimestamp(time1);
        const end = this.transformTimestamp(time2);
        this.startTime = start;
        this.endTime = end;
        console.log(this.startTime);
        console.log(this.endTime);
        this.fetchTableList();
      } else {
        this.startTime = "";
        this.endTime = "";
        this.fetchTableList();
      }
    },
    //数据导出
    exportGet() {
      // return
      this.$http({
        url: this.$http.adornUrl("cpcplog/downloadLog"),
        method: "get",
        params: this.$http.adornParams({
          linkId: this.$route.query.id,
          searchStr: this.userName,
          isRead: this.isRead,
          // readTime: this.timeVal,
          startTime: this.startTime,
          endTime: this.endTime,
          sendType: 0,
          logIndex: this.numValue,
        }),
        responseType: "blob",
      }).then((res) => {
        console.log(res, "ddddddd");
        if (res.status == 200) {
          if (this.totalCount === 0) {
            this.$message({
              message: "要导出的列表为空!",
              type: "warning",
            });
            return;
          } else {
            let blob = res.data;
            const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
            console.log(fileReader, "fileReader");
            fileReader.readAsDataURL(blob); // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
            fileReader.onload = (event) => {
              // 处理load事件。该事件在读取操作完成时触发
              // 新建个下载的a标签，完成后移除。
              let a = document.createElement("a");
              // console.log(this.duInfo.title,"duInfo.title");
              let _fileName = this.duInfo.activityName + ".xls";
              a.download = _fileName;
              a.href = event.target.result;
              document.body.appendChild(a);
              a.click();
              document.body.removeChild(a);
            };
          }
        }
      });
    },
    // 分页
    pageChange(page) {
      console.log(page);
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.fetchTableList();
    },
  },
};
</script>
<style scoped>
.green {
  color: green;
}
.red {
  color: red;
}
.des_con span {
  font-size: 18px;
  font-weight: 600;
}
.read {
  cursor: pointer;
  color: yellowgreen;
}
.table {
  width: 100%;
}
.table tr {
  line-height: 30px;
}
.table tr td {
  width: 50%;
}
.box {
  min-height: 100vh;
  padding: 20px;
  background-color: rgba(13, 45, 105, 0.6) !important;
}
</style>
